import React, {Component} from 'react';

class Index extends Component {
    state={
        name:"123456"
    }
    render() {
        console.log("render")
        return (
            <div>
                {this.state.name}
                <Child1 name={this.state.name}></Child1>
                <button onClick={()=>{
                    this.setState({
                        name:"张三"
                    })
                }} >铁锤</button>
            </div>
        );
    }
    /*
    * 在接受父组件改变后的props需要重新渲染组件使用的比较多
    * 接受一个参数nextProps
    * 通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件
    * */
    componentWillReceiveProps(nextProps, nextContext) {
        console.log("hahqh")
        console.log(nextProps)
        this.setState({
            name:"name"
        })
    }
    /*
    *
    * */
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        //更新后的数据
        console.log("componentWillUpdate")
        console.log(nextProps,nextState)
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate")
        /*
        * 执行顺序
        * render=》componentWillUpdate=>componentDidUpdate
        * */
        /*
        * 更新后获取Dom节点
        * */
        console.log(prevProps,prevState)
    }
    //返回false会阻止render调用
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        // return true; 返回值为true会一直更新
        // return false; 返回值为false不会更新
        if (this.state.name==nextState.name){
            console.log(nextState)
            return false
        }else {
            return true;
        }
    }
}
class Child1 extends Component{
    render() {
        return(
            <div>
                {this.props.name}
            </div>
        )
    }
componentWillReceiveProps(nextProps, nextContext) {
    console.log("componentWillReceiveProps")
    //获取新的数据
    console.log(nextProps)
}
}
export default Index;
